<template>
  <el-date-picker ref="endDate" v-model="dateStr" type="month" placeholder="选择日期" value-format="yyyy-MM" style="width:100%;" :picker-options="endDateOption" @change="onEndDateChange">
  </el-date-picker>
</template>

<script>
import { DatePicker } from 'element-ui';

export default {
  extends: DatePicker,  
  components: {
    DatePicker
  },
  data(){
    return {
      dateStr:'',
      endDateOption:{
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '至今',
          onClick(picker) {
            const date = new Date('2099-1-1');
            picker.$emit('pick', date);
            picker.format = '至今';
            picker.value = '至今';
          }
        }]
      }
    };
  },
  methods:{
    onEndDateChange(value){
      console.log(value);
      var _this = this;
      setTimeout(function(){
        this.dateStr = '至今';
        // console.log(_this.$refs['endDate'].value = '至今');
        var endDateDom = _this.$refs['endDate'].$el.getElementsByTagName('input')[0];
        endDateDom.value = '至今';
        console.log(endDateDom.value);
      }, 0);
    }
  },
};
</script>